<template>
    <div>
        <el-descriptions
            :colon="pageRegionFrame.colon"
            :title="pageRegionFrame.title"
            :column="pageRegionFrame.column"
            class="page-descriptions"
            :border="pageRegionFrame.border"
            :style="{ '--theme': theme }"
            label-class-name="labelCls"
            content-class-name="contenCls"
        >
            <template v-if="pageRegionFrame.type == 'desc'">
                <el-descriptions-item
                    v-for="(minItem, minIndex) in pageRegionFrame.descs"
                    :key="minIndex"
                    :label="minItem.label"
                    :span="minItem.span"
                >
                    <cell-render :cell-render-frame="minItem" :cell-render-data="pageRegionData"></cell-render>
                </el-descriptions-item>
            </template>
            <el-descriptions-item
                v-else-if="pageRegionFrame.type == 'tabs'"
                :label-style="{ 'margin-right': '0', color: '#262626' }"
                :content-style="{ width: '100%', color: '#262626' }"
            >
                <el-tabs
                    v-model="pageRegionFrame.active"
                    :tab-position="pageRegionFrame.position"
                    :type="pageRegionFrame.type"
                >
                    <el-tab-pane
                        v-for="(tab, index) in pageRegionFrame.tabs"
                        :key="index"
                        :label="tab.title"
                        :name="tab.key"
                    >
                        <slot :name="tab.slot" :page-region-data="pageRegionData[tab.key]" />
                    </el-tab-pane>
                </el-tabs>
            </el-descriptions-item>
            <el-descriptions-item
                v-else-if="pageRegionFrame.type == 'form'"
                :label-style="{ 'margin-right': '0', color: '#262626' }"
                :content-style="{ width: '100%', color: '#262626' }"
            >
                <slot
                    name="pageRegionFrame-form"
                    :page-region-frame="pageRegionFrame"
                    :page-region-data="pageRegionData"
                ></slot>
            </el-descriptions-item>
            <el-descriptions-item
                v-else-if="pageRegionFrame.type == 'slot'"
                :label-style="{ 'margin-right': '0', color: '#262626' }"
                :content-style="{ width: '100%', color: '#262626' }"
            >
                <slot
                    :name="pageRegionFrame.slot"
                    :page-region-frame="pageRegionFrame"
                    :page-region-data="pageRegionData"
                ></slot>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script>
import CellRender from './CellRender.vue'
export default {
    components: { CellRender },
    props: {
        pageRegionFrame: {
            type: Object,
            default: () => ({})
        },
        pageRegionData: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        theme() {
            return this.$store.state.settings.theme
        }
    }
}
</script>
<style lang="scss">
.page-descriptions {
    padding: 10px 0;
    margin: 0 15px;
    .labelCls {
        color: #262626 !important;
        word-break: keep-all;
    }
    .contenCls {
        color: #262626 !important;
        display: block !important;
    }
    .el-descriptions-item__label {
        word-break: keep-all;
    }
    .el-descriptions-row {
        line-height: 30px;
    }
    .el-descriptions__header {
        margin-bottom: 10px;
    }
    .el-descriptions__body {
        color: #262626 !important;
        padding-left: 7px;
        .el-descriptions-item__label.no-colon::after {
            content: '' !important;
        }
        table table {
            border-collapse: separate;
        }
    }
    .el-descriptions__title {
        font-size: 14px !important;
        border-left: 2px solid #{'var(--theme)'} !important;
        padding-left: 7px;
        line-height: 14px;
    }
    .page-body {
        td,
        th {
            padding-top: 6px !important;
            padding-bottom: 6px !important;
        }
    }
}
.page-descriptions:first-child {
    padding-top: 0;
}
.page-descriptions:last-child {
    border-bottom: none;
}
</style>
